<script setup lang="ts">
import * as THREE from 'three';
import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue';
import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, HemisphericLight } from '@babylonjs/core';
import t1 from '../assets/image/t1.jpg'
import j1 from '../assets/image/j2.png'
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js'
import { Tween, remove, removeAll } from '@tweenjs/tween.js';
const bjsCanvas = ref<HTMLCanvasElement | null>(null);
const threeContainer = ref<HTMLDivElement>();

let scene: any = null;
let renderer: any = null;
let cube: any = null;
let camera: any = null;
let controls: any = null

let point: { x: 0, y: 20, z: 100, tx: 0, ty: 0, tz: 0, }
function initThree() {
  // 创建场景  
  scene = new THREE.Scene();

  // 创建相机  
  camera = new THREE.PerspectiveCamera(
    45,
    threeContainer.value!.clientWidth / threeContainer.value!.clientHeight,
    0.9,
    1000
  );
  camera.position.y = 20;
  camera.position.z = 100;
  // 创建渲染器  
  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(threeContainer.value!.clientWidth, threeContainer.value!.clientHeight);
  renderer.setClearAlpha(0);
  threeContainer.value?.appendChild(renderer.domElement);
  controls = new OrbitControls(camera, renderer.domElement)
  controls.maxDistance = 300;
  scene.add(controls);

  let geometry = new THREE.BoxGeometry(30, 40, 10);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: false });
  cube = new THREE.Mesh(geometry, material);
  cube.name = 'geometry'
  cube.position.set(-35, 21, -40)
  scene.add(cube);
  const pointLight = new THREE.PointLight(0xff0000, 1, 100);
  pointLight.position.set(10, 10, 10);
  scene.add(pointLight);
  let geometry1 = new THREE.BoxGeometry(15, 40, 15);
  const textureLoader1 = new THREE.TextureLoader();
  const texture1 = textureLoader1.load(t1);
  let material1 = new THREE.MeshBasicMaterial({ map: texture1, });
  let cube1 = new THREE.Mesh(geometry1, material1);
  cube1.name = 'geometry1'
  cube1.position.set(-40, 20, 10)
  scene.add(cube1);

  let geometry2 = new THREE.BoxGeometry(0, 20, 20);
  let material2 = new THREE.MeshBasicMaterial({ color: '#9370DB', side: THREE.DoubleSide });
  let cube2 = new THREE.Mesh(geometry2, material2);
  cube2.position.set(40, 10, 10)
  scene.add(cube2);
  let material3 = new THREE.MeshBasicMaterial({ color: '#cc9966', side: THREE.DoubleSide });
  let geometry3 = new THREE.BoxGeometry(20, 20, 20);
  let cube3 = new THREE.Mesh(geometry3, material3);
  cube3.name = 'geometry3'
  cube3.position.set(0, 11, -11)
  scene.add(cube3);
  let material4 = new THREE.MeshBasicMaterial({ color: '#663399', side: THREE.DoubleSide });
  let geometry4 = new THREE.BoxGeometry(20, 20, 20);
  let cube4 = new THREE.Mesh(geometry4, material4);
  cube4.position.set(10, 10, 10)
  scene.add(cube4);

  const texture5 = textureLoader1.load(j1);
  let material5 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry5 = new THREE.BoxGeometry(2, 2, 2);
  let cube5 = new THREE.Mesh(geometry5, material5);
  cube5.position.set(-22, 36, -43)
  scene.add(cube5);

  let material6 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry6 = new THREE.BoxGeometry(2, 2, 2);
  let cube6 = new THREE.Mesh(geometry6, material6);
  cube6.position.set(-22, 36, -37)
  scene.add(cube6);
  let material7 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry7 = new THREE.BoxGeometry(2, 2, 2);
  let cube7 = new THREE.Mesh(geometry7, material7);
  cube7.position.set(-26, 36, -43)
  scene.add(cube7);
  let material8 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry8 = new THREE.BoxGeometry(2, 2, 2);
  let cube8 = new THREE.Mesh(geometry8, material8);
  cube8.position.set(-26, 36, -37)
  scene.add(cube8);
  let material9 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry9 = new THREE.BoxGeometry(2, 2, 2);
  let cube9 = new THREE.Mesh(geometry9, material9);
  cube9.position.set(-30, 36, -43)
  scene.add(cube9);

  let material10 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry10 = new THREE.BoxGeometry(2, 2, 2);
  let cube10 = new THREE.Mesh(geometry10, material10);
  cube10.position.set(-30, 36, -37)
  scene.add(cube10);

  let material11 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry11 = new THREE.BoxGeometry(2, 2, 2);
  let cube11 = new THREE.Mesh(geometry11, material11);
  cube11.position.set(-34, 36, -43)
  scene.add(cube11);

  let material12 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry12 = new THREE.BoxGeometry(2, 2, 2);
  let cube12 = new THREE.Mesh(geometry12, material12);
  cube12.position.set(-34, 36, -37)
  scene.add(cube12);
  let material13 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry13 = new THREE.BoxGeometry(2, 2, 2);
  let cube13 = new THREE.Mesh(geometry13, material13);
  cube13.position.set(-38, 36, -43)
  scene.add(cube13);
  let material14 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry14 = new THREE.BoxGeometry(2, 2, 2);
  let cube14 = new THREE.Mesh(geometry14, material14);
  cube14.position.set(-38, 36, -37)
  scene.add(cube14);

  let material15 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry15 = new THREE.BoxGeometry(2, 2, 2);
  let cube15 = new THREE.Mesh(geometry15, material15);
  cube15.position.set(-42, 36, -37)
  scene.add(cube15);
  let material16 = new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide });
  let geometry16 = new THREE.BoxGeometry(2, 2, 2);
  let cube16 = new THREE.Mesh(geometry16, material16);
  cube16.position.set(-42, 36, -43)
  scene.add(cube16);
  let cube17 = new THREE.Mesh(geometry5, material5);
  cube17.position.set(-46, 36, -37)
  scene.add(cube17);
  let cube18 = new THREE.Mesh(geometry5, material5);
  cube18.position.set(-46, 36, -43)
  scene.add(cube18);
  // let cube19 = new THREE.Mesh(geometry5, material5);
  // cube19.position.set(-44, 36, -37)
  // scene.add(cube19);
  // let cube20 = new THREE.Mesh(geometry5, material5);
  // cube20.position.set(-44, 36, -43)
  // scene.add(cube20);


  // let textureLoader = new THREE.TextureLoader();
  let cubeMaterial: any = new THREE.MeshBasicMaterial({ color: '#EEEEEE', transparent: true, side: THREE.DoubleSide });
  let planeGeometry = new THREE.PlaneGeometry(200, 200);
  let plane = new THREE.Mesh(planeGeometry, cubeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  // plane.position.x = 0;
  // plane.position.z = 0;
  plane.name = 'planeGeometry'
  scene.add(plane)

  modul()

  // class CustomSinCurve extends THREE.Curve {

  //   constructor( scale = 1 ) {
  //     super();
  //     this.scale = scale;
  //   }

  //   getPoint( t, optionalTarget = new THREE.Vector3() ) {

  //     const tx = t * 3 - 1.5;
  //     const ty = Math.sin( 2 * Math.PI * t );
  //     const tz = 0;

  //     return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );
  //   }
  // }

  // const path = new CustomSinCurve( 10 );
  // const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
  // const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  // const mesh = new THREE.Mesh( geometry, material );
  // scene.add( mesh );





  const shape = new THREE.Shape();// 创建形状
  shape.moveTo(0, 0);
  shape.lineTo(2, 0);
  shape.lineTo(2, 2);
  shape.lineTo(0, 2);
  shape.lineTo(0, 0);



  const curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-10, -50, -50),
    new THREE.Vector3(10, 0, 0),
    new THREE.Vector3(8, 50, 50),
    new THREE.Vector3(-5, 0, 100)
  ]);


  const guan = new THREE.ExtrudeGeometry(shape, { // 创建挤出几何体
    extrudePath: curve,//扫描轨迹
    steps: 100 //沿着路径细分精度，越大越光滑
  });
  const guanMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建材质
  const mesh = new THREE.Mesh(guan, guanMaterial); // 创建网格
  scene.add(mesh);// 将网格添加到场景中
};



function modul() {

  let num = 0
  for (let i = 0; i < 7; i++) {
    let cubeMaterial: any = 'cubeMaterial' + i
    let planeGeometry: any = 'planeGeometry' + i
    let name = 'planeGeometry' + (i + 1)
    let plane: any = 'plane' + i
    num += 5
    let color = getRandomColor()
    planeGeometry = new THREE.PlaneGeometry(30, 10);
    cubeMaterial = new THREE.MeshBasicMaterial({ color: color, transparent: true, side: THREE.DoubleSide });
    plane = new THREE.Mesh(planeGeometry, cubeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = -35;
    plane.position.y = num;
    plane.position.z = -40
    plane.name = name
    scene.add(plane)
  }

}

function getRandomColor() {
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += Math.floor(Math.random() * 16).toString(16);
  }
  return color;
}

// 创建射线投射器
const raycaster = new THREE.Raycaster()


window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
});

const mouse = new THREE.Vector2();

window.addEventListener("click", (event: any) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -((event.clientX / window.innerWidth) * 2 - 1)
  raycaster.setFromCamera(mouse, camera)
  const intersects: any = raycaster.intersectObjects(scene.children, false)
  const selectedObject = intersects[0].object
  const selectedPoint = intersects[0].point


  if (intersects.length > 0) {
    console.log(selectedObject.name);
    if (selectedObject.name == 'geometry') {
      // point = {x: selectedPoint.x, y: selectedPoint.y, z: selectedPoint.z, tx: 0, ty: 0, tz: 0,} 
      // geometryDown()
      // const geometry = new TWEEN.Tween({x: selectedPoint.x, y: selectedPoint.y, z: selectedPoint.z, tx:selectedPoint.x, ty:selectedPoint.y, tz: selectedPoint.z,} ).to({ x: -80, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }, 3000)
      //   .onUpdate(function (obj) {
      //     camera.position.set(obj.x, obj.y, obj.z);
      //     camera.lookAt(obj.tx, obj.ty, obj.tz);
      //   })
      // geometryDown()
      // pos()
    } else {
      // TWEEN.removeAll()


    }

  }
});


const animate = () => {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
  camera.updateProjectionMatrix();
  // 更新动画
  TWEEN.update()

};

let dian =
  [
    [{ x: 0, y: 20, z: 100, tx: 0, ty: 0, tz: 0, }, { x: -80, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }],

    [{ x: -80, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }, { x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }],

    [{ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }, { x: -50, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }],

    [{ x: -50, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }, { x: -25, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }],

    [{ x: -25, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }, { x: -25, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }],

    [{ x: -25, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }, { x: -50, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }],

    [{ x: -50, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }, { x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }],

    [{ x: -50, y: 39, z: -40, tx: -50, ty: 39, tz: -40, }, { x: -80, y: 39, z: -40, tx: -50, ty: 39, tz: -40, }],

    [{ x: -80, y: 39, z: -40, tx: -50, ty: 39, tz: -40, }, { x: -80, y: 33, z: -40, tx: 0, ty: 39, tz: -40, }],

    [{ x: -80, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }, { x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }],

    [{ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }, { x: -50, y: 33, z: -37, tx: 0, ty: 33, tz: -40, }],

    [{ x: -50, y: 33, z: -37, tx: 0, ty: 33, tz: -40, }, { x: -25, y: 33, z: -37, tx: 0, ty: 33, tz: -40 }],

    [{ x: -25, y: 33, z: -37, tx: 0, ty: 33, tz: -40, }, { x: -25, y: 33, z: -42, tx: -50, ty: 33, tz: -40, }],

    [{ x: -25, y: 33, z: -42, tx: -50, ty: 33, tz: -40, }, { x: -50, y: 33, z: -42, tx: -50, ty: 33, tz: -40, }],

    [{ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }, { x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }],

    [{ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }, { x: -50, y: 33, z: -42, tx: 0, ty: 33, tz: -40, }],

    [{ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }, { x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }],

    [{ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }, { x: -80, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }],

    [{ x: -80, y: 33, z: -40, tx: 0, ty: 28, tz: -40, }, { x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }],

    [{ x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, { x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }],

    [{ x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, { x: -50, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }],

    [{ x: -50, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }, { x: -25, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }],

    [{ x: -25, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }, { x: -25, y: 28, z: -37, tx: -50, ty: 28, tz: -40, }],

    [{ x: -25, y: 28, z: -37, tx: -50, ty: 28, tz: -40, }, { x: -25, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }],

    [{ x: -25, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }, { x: -50, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }],

    [{ x: -50, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }, { x: -50, y: 28, z: -42, tx: 0, ty: 28, tz: -40, }],

    [{ x: -50, y: 28, z: -42, tx: 0, ty: 28, tz: -40, }, { x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }],

    [{ x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, { x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }],

    [{ x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, { x: -80, y: 23, z: -40, tx: 0, ty: 28, tz: -40, }],

    [{ x: -80, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }, { x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }],

    [{ x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }, { x: -50, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }],

    [{ x: -50, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }, { x: -25, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }],

    [{ x: -25, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }, { x: -25, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }],

    [{ x: -25, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }, { x: -50, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }],

    [{ x: -50, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }, { x: -50, y: 23, z: -42, tx: 0, ty: 23, tz: -40, }],

    [{ x: -50, y: 23, z: -42, tx: 0, ty: 23, tz: -40, }, { x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }],

    [{ x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }, { x: -80, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }],

    [{ x: -80, y: 23, z: -40, tx: 0, ty: 19, tz: -40, }, { x: -80, y: 19, z: -40, tx: 0, ty: 19, tz: -40, }],

    [{ x: -80, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }, { x: -50, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }],

    [{ x: -50, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }, { x: -50, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }],

    [{ x: -50, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }, { x: -25, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }],

    [{ x: -25, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }, { x: -25, y: 18, z: -37, tx: -50, ty: 18, tz: -40, }],

    [{ x: -25, y: 18, z: -37, tx: -50, ty: 18, tz: -40, }, { x: -25, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }],

    [{ x: -25, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }, { x: -50, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }],

    [{ x: -50, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }, { x: -50, y: 18, z: -42, tx: 0, ty: 18, tz: -40, }],

    [{ x: -50, y: 18, z: -42, tx: 0, ty: 18, tz: -40, }, { x: -50, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }],

    [{ x: -50, y: 18, z: -40, tx: 0, ty: 19, tz: -40, }, { x: -80, y: 18, z: -40, tx: 0, ty: 19, tz: -40, }],

    [{ x: -80, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }, { x: -80, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }],

    [{ x: -80, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }, { x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }],

    [{ x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }, { x: -50, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }],

    [{ x: -50, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }, { x: -25, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }],

    [{ x: -25, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }, { x: -25, y: 13, z: -37, tx: -50, ty: 13, tz: -40, }],

    [{ x: -25, y: 13, z: -37, tx: -50, ty: 13, tz: -40, }, { x: -25, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }],

    [{ x: -25, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }, { x: -50, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }],

    [{ x: -50, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }, { x: -50, y: 13, z: -42, tx: 0, ty: 13, tz: -40, }],

    [{ x: -50, y: 13, z: -42, tx: 0, ty: 13, tz: -40, }, { x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }],

    [{ x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }, { x: -80, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }],

    [{ x: -80, y: 13, z: -40, tx: 0, ty: 9, tz: -40, }, { x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }],

    [{ x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, { x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }],

    [{ x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, { x: -50, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }],

    [{ x: -50, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }, { x: -25, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }],

    [{ x: -25, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }, { x: -25, y: 9, z: -37, tx: -50, ty: 9, tz: -40, }],

    [{ x: -25, y: 9, z: -37, tx: -50, ty: 9, tz: -40, }, { x: -25, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }],

    [{ x: -25, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }, { x: -50, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }],

    [{ x: -50, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }, { x: -50, y: 9, z: -42, tx: 0, ty: 9, tz: -40, }],

    [{ x: -50, y: 9, z: -42, tx: 0, ty: 9, tz: -40, }, { x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }],

    [{ x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, { x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }],

    [{ x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, { x: -80, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }],

    [{ x: -80, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, { x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }],

    [{ x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, { x: -50, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }],

    [{ x: -50, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }, { x: -25, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }],

    [{ x: -25, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }, { x: -25, y: 4, z: -37, tx: -50, ty: 4, tz: -40, }],

    [{ x: -25, y: 4, z: -37, tx: -50, ty: 4, tz: -40, }, { x: -25, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }],

    [{ x: -25, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }, { x: -50, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }],

    [{ x: -50, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }, { x: -50, y: 4, z: -42, tx: 0, ty: 4, tz: -40, }],

    [{ x: -50, y: 4, z: -42, tx: 0, ty: 4, tz: -40, }, { x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }],

    [{ x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, { x: -80, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }],

  ]



function down() {
  const geometry = new TWEEN.Tween({ x: 0, y: 20, z: 100, tx: 0, ty: 0, tz: 0, }).to({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }, 3000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry7 = new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }).to({ x: -50, y: 33, z: -40, tx: 0, ty: 29, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry6 = new TWEEN.Tween({ x: -50, y: 33, z: -40, tx: 0, ty: 29, tz: -35 }).to({ x: -50, y: 28, z: -40, tx: 0, ty: 24, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry5 = new TWEEN.Tween({ x: -50, y: 28, z: -40, tx: 0, ty: 24, tz: -35 }).to({ x: -50, y: 23, z: -40, tx: 0, ty: 20, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry4 = new TWEEN.Tween({ x: -50, y: 23, z: -40, tx: 0, ty: 20, tz: -35 }).to({ x: -50, y: 19, z: -40, tx: 0, ty: 15, tz: -35 }, 3000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry3 = new TWEEN.Tween({ x: -50, y: 19, z: -40, tx: 0, ty: 15, tz: -35 }).to({ x: -50, y: 13, z: -40, tx: 0, ty: 10, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry2 = new TWEEN.Tween({ x: -50, y: 13, z: -40, tx: 0, ty: 10, tz: -35 }).to({ x: -50, y: 9, z: -40, tx: 0, ty: 7, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry1 = new TWEEN.Tween({ x: -50, y: 9, z: -40, tx: 0, ty: 7, tz: -35 }).to({ x: -50, y: 5, z: -40, tx: 0, ty: 5, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })





  geometry.chain(planeGeometry7)
  planeGeometry7.chain(planeGeometry6)
  planeGeometry6.chain(planeGeometry5)
  planeGeometry5.chain(planeGeometry4)
  planeGeometry4.chain(planeGeometry3)
  planeGeometry3.chain(planeGeometry2)
  planeGeometry2.chain(planeGeometry1)
  // planeGeometry1.chain(geometry)



  geometry.start()

  const group = new TWEEN.Group()
  group.add(geometry)
  group.add(planeGeometry7)
  group.add(planeGeometry6)
  group.add(planeGeometry5)
  group.add(planeGeometry4)
  group.add(planeGeometry3)
  group.add(planeGeometry2)
  group.add(planeGeometry1)
}

function geometryDown() {
  const geometry = new TWEEN.Tween({ x: 0, y: 20, z: 100, tx: 0, ty: 0, tz: 0, }).to({ x: -80, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }, 3000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry1 = new TWEEN.Tween({ x: -80, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }).to({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }, 2000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry2 = new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }).to({ x: -50, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry3 = new TWEEN.Tween({ x: -50, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }).to({ x: -23, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry4 = new TWEEN.Tween({ x: -23, y: 39, z: -37, tx: 0, ty: 39, tz: -40, }).to({ x: -23, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry5 = new TWEEN.Tween({ x: -23, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }).to({ x: -50, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry6 = new TWEEN.Tween({ x: -50, y: 39, z: -42, tx: -50, ty: 39, tz: -40, }).to({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry7 = new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: -50, ty: 39, tz: -40, }).to({ x: -80, y: 39, z: -40, tx: -50, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry8 = new TWEEN.Tween({ x: -80, y: 39, z: -40, tx: -50, ty: 39, tz: -40, }).to({ x: -80, y: 33, z: -40, tx: 0, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry9 = new TWEEN.Tween({ x: -80, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }).to({ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry10 = new TWEEN.Tween({ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }).to({ x: -50, y: 33, z: -37, tx: 0, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry11 = new TWEEN.Tween({ x: -50, y: 33, z: -37, tx: 0, ty: 33, tz: -40, }).to({ x: -25, y: 33, z: -37, tx: 0, ty: 33, tz: -40 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry12 = new TWEEN.Tween({ x: -25, y: 33, z: -37, tx: 0, ty: 33, tz: -40, }).to({ x: -25, y: 33, z: -42, tx: -50, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry13 = new TWEEN.Tween({ x: -25, y: 33, z: -42, tx: -50, ty: 33, tz: -40, }).to({ x: -50, y: 33, z: -42, tx: -50, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry14 = new TWEEN.Tween({ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }).to({ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry144 = new TWEEN.Tween({ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }).to({ x: -50, y: 33, z: -42, tx: 0, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry15 = new TWEEN.Tween({ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40, }).to({ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry16 = new TWEEN.Tween({ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }).to({ x: -80, y: 33, z: -40, tx: 0, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  //--------
  const geometry17 = new TWEEN.Tween({ x: -80, y: 33, z: -40, tx: 0, ty: 28, tz: -40, }).to({ x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry18 = new TWEEN.Tween({ x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }).to({ x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry19 = new TWEEN.Tween({ x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }).to({ x: -50, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry20 = new TWEEN.Tween({ x: -50, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }).to({ x: -25, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry21 = new TWEEN.Tween({ x: -25, y: 28, z: -37, tx: 0, ty: 28, tz: -40, }).to({ x: -25, y: 28, z: -37, tx: -50, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry22 = new TWEEN.Tween({ x: -25, y: 28, z: -37, tx: -50, ty: 28, tz: -40, }).to({ x: -25, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })

  const geometry23 = new TWEEN.Tween({ x: -25, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }).to({ x: -50, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })

  const geometry24 = new TWEEN.Tween({ x: -50, y: 28, z: -42, tx: -50, ty: 28, tz: -40, }).to({ x: -50, y: 28, z: -42, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry24_4 = new TWEEN.Tween({ x: -50, y: 28, z: -42, tx: 0, ty: 28, tz: -40, }).to({ x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry24_4_1 = new TWEEN.Tween({ x: -50, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }).to({ x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry25 = new TWEEN.Tween({ x: -80, y: 28, z: -40, tx: 0, ty: 28, tz: -40, }).to({ x: -80, y: 23, z: -40, tx: 0, ty: 28, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  //=========
  const geometry26 = new TWEEN.Tween({ x: -80, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }).to({ x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry27 = new TWEEN.Tween({ x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }).to({ x: -50, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })

  const geometry28 = new TWEEN.Tween({ x: -50, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }).to({ x: -25, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry29 = new TWEEN.Tween({ x: -25, y: 23, z: -37, tx: 0, ty: 23, tz: -40, }).to({ x: -25, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry30 = new TWEEN.Tween({ x: -25, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }).to({ x: -50, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry31 = new TWEEN.Tween({ x: -50, y: 23, z: -42, tx: -50, ty: 23, tz: -40, }).to({ x: -50, y: 23, z: -42, tx: 0, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry32 = new TWEEN.Tween({ x: -50, y: 23, z: -42, tx: 0, ty: 23, tz: -40, }).to({ x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry33 = new TWEEN.Tween({ x: -50, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }).to({ x: -80, y: 23, z: -40, tx: 0, ty: 23, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  //====
  const geometry34 = new TWEEN.Tween({ x: -80, y: 23, z: -40, tx: 0, ty: 19, tz: -40, }).to({ x: -80, y: 19, z: -40, tx: 0, ty: 19, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry35 = new TWEEN.Tween({ x: -80, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }).to({ x: -50, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry36 = new TWEEN.Tween({ x: -50, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }).to({ x: -50, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry37 = new TWEEN.Tween({ x: -50, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }).to({ x: -25, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry38 = new TWEEN.Tween({ x: -25, y: 18, z: -37, tx: 0, ty: 18, tz: -40, }).to({ x: -25, y: 18, z: -37, tx: -50, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry39 = new TWEEN.Tween({ x: -25, y: 18, z: -37, tx: -50, ty: 18, tz: -40, }).to({ x: -25, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry40 = new TWEEN.Tween({ x: -25, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }).to({ x: -50, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry41 = new TWEEN.Tween({ x: -50, y: 18, z: -42, tx: -50, ty: 18, tz: -40, }).to({ x: -50, y: 18, z: -42, tx: 0, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry42 = new TWEEN.Tween({ x: -50, y: 18, z: -42, tx: 0, ty: 18, tz: -40, }).to({ x: -50, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry43 = new TWEEN.Tween({ x: -50, y: 18, z: -40, tx: 0, ty: 19, tz: -40, }).to({ x: -80, y: 18, z: -40, tx: 0, ty: 19, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  //==== 
  const geometry44 = new TWEEN.Tween({ x: -80, y: 18, z: -40, tx: 0, ty: 18, tz: -40, }).to({ x: -80, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry45 = new TWEEN.Tween({ x: -80, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }).to({ x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry46 = new TWEEN.Tween({ x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }).to({ x: -50, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry47 = new TWEEN.Tween({ x: -50, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }).to({ x: -25, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry48 = new TWEEN.Tween({ x: -25, y: 13, z: -37, tx: 0, ty: 13, tz: -40, }).to({ x: -25, y: 13, z: -37, tx: -50, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry49 = new TWEEN.Tween({ x: -25, y: 13, z: -37, tx: -50, ty: 13, tz: -40, }).to({ x: -25, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry50 = new TWEEN.Tween({ x: -25, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }).to({ x: -50, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry51 = new TWEEN.Tween({ x: -50, y: 13, z: -42, tx: -50, ty: 13, tz: -40, }).to({ x: -50, y: 13, z: -42, tx: 0, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry52 = new TWEEN.Tween({ x: -50, y: 13, z: -42, tx: 0, ty: 13, tz: -40, }).to({ x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry53 = new TWEEN.Tween({ x: -50, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }).to({ x: -80, y: 13, z: -40, tx: 0, ty: 13, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  //==
  const geometry54 = new TWEEN.Tween({ x: -80, y: 13, z: -40, tx: 0, ty: 9, tz: -40, }).to({ x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry55 = new TWEEN.Tween({ x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }).to({ x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry56 = new TWEEN.Tween({ x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }).to({ x: -50, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry57 = new TWEEN.Tween({ x: -50, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }).to({ x: -25, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry58 = new TWEEN.Tween({ x: -25, y: 9, z: -37, tx: 0, ty: 9, tz: -40, }).to({ x: -25, y: 9, z: -37, tx: -50, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry59 = new TWEEN.Tween({ x: -25, y: 9, z: -37, tx: -50, ty: 9, tz: -40, }).to({ x: -25, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry60 = new TWEEN.Tween({ x: -25, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }).to({ x: -50, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry61 = new TWEEN.Tween({ x: -50, y: 9, z: -42, tx: -50, ty: 9, tz: -40, }).to({ x: -50, y: 9, z: -42, tx: 0, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry62 = new TWEEN.Tween({ x: -50, y: 9, z: -42, tx: 0, ty: 9, tz: -40, }).to({ x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry63 = new TWEEN.Tween({ x: -50, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }).to({ x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  //===
  const geometry64 = new TWEEN.Tween({ x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }).to({ x: -80, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry65 = new TWEEN.Tween({ x: -80, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }).to({ x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry66 = new TWEEN.Tween({ x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }).to({ x: -50, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry67 = new TWEEN.Tween({ x: -50, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }).to({ x: -25, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry68 = new TWEEN.Tween({ x: -25, y: 4, z: -37, tx: 0, ty: 4, tz: -40, }).to({ x: -25, y: 4, z: -37, tx: -50, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry69 = new TWEEN.Tween({ x: -25, y: 4, z: -37, tx: -50, ty: 4, tz: -40, }).to({ x: -25, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry70 = new TWEEN.Tween({ x: -25, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }).to({ x: -50, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry71 = new TWEEN.Tween({ x: -50, y: 4, z: -42, tx: -50, ty: 4, tz: -40, }).to({ x: -50, y: 4, z: -42, tx: 0, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry72 = new TWEEN.Tween({ x: -50, y: 4, z: -42, tx: 0, ty: 4, tz: -40, }).to({ x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const geometry73 = new TWEEN.Tween({ x: -50, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }).to({ x: -80, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  // const geometry74 = new TWEEN.Tween({ x: -80, y: 9, z: -40, tx: 0, ty: 9, tz: -40, }).to({ x: -80, y: 4, z: -40, tx: 0, ty: 4, tz: -40, }, 1000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })

  geometry.chain(geometry1)
  geometry1.chain(geometry2)
  geometry2.chain(geometry3)
  geometry3.chain(geometry4)
  geometry4.chain(geometry5)
  geometry5.chain(geometry6)
  geometry6.chain(geometry7)
  geometry7.chain(geometry8)
  geometry8.chain(geometry9)
  geometry9.chain(geometry10)
  geometry10.chain(geometry11)
  geometry11.chain(geometry12)
  geometry12.chain(geometry13)
  geometry13.chain(geometry14)
  geometry14.chain(geometry15)
  geometry144.chain(geometry15)
  geometry15.chain(geometry16)
  geometry16.chain(geometry17)
  geometry17.chain(geometry18)
  geometry18.chain(geometry19)
  geometry19.chain(geometry20)
  geometry20.chain(geometry21)
  geometry21.chain(geometry22)
  geometry22.chain(geometry23)
  geometry23.chain(geometry24)
  geometry24.chain(geometry24_4)
  geometry24_4.chain(geometry24_4_1)
  geometry24_4_1.chain(geometry25)
  geometry25.chain(geometry26)
  geometry26.chain(geometry27)
  geometry27.chain(geometry28)
  geometry28.chain(geometry29)
  geometry29.chain(geometry30)
  geometry30.chain(geometry31)
  geometry31.chain(geometry32)
  geometry32.chain(geometry33)
  geometry33.chain(geometry34)
  geometry34.chain(geometry35)
  geometry35.chain(geometry36)
  geometry36.chain(geometry37)
  geometry37.chain(geometry38)
  geometry38.chain(geometry39)
  geometry39.chain(geometry40)
  geometry40.chain(geometry41)
  geometry41.chain(geometry42)
  geometry42.chain(geometry43)
  geometry43.chain(geometry44)
  geometry44.chain(geometry45)
  geometry45.chain(geometry46)
  geometry46.chain(geometry47)
  geometry47.chain(geometry48)
  geometry48.chain(geometry49)
  geometry49.chain(geometry50)
  geometry50.chain(geometry51)
  geometry51.chain(geometry52)
  geometry52.chain(geometry53)
  geometry53.chain(geometry54)
  geometry54.chain(geometry55)
  geometry55.chain(geometry56)
  geometry56.chain(geometry57)
  geometry57.chain(geometry58)
  geometry58.chain(geometry59)
  geometry59.chain(geometry60)
  geometry60.chain(geometry61)
  geometry61.chain(geometry62)
  geometry62.chain(geometry63)
  geometry63.chain(geometry64)
  geometry64.chain(geometry65)
  geometry65.chain(geometry66)
  geometry66.chain(geometry67)
  geometry67.chain(geometry68)
  geometry68.chain(geometry69)
  geometry69.chain(geometry70)
  geometry70.chain(geometry71)
  geometry71.chain(geometry72)
  geometry72.chain(geometry73)
  // geometry73.chain(geometry74)

  geometry.start()

  const group = new TWEEN.Group()
  group.add(geometry)
  group.add(geometry1)
  group.add(geometry2)
  group.add(geometry3)
  group.add(geometry4)
  group.add(geometry5)
  group.add(geometry6)
  group.add(geometry7)
  group.add(geometry8)
  group.add(geometry9)
  group.add(geometry10)
  group.add(geometry11)
  group.add(geometry12)
  group.add(geometry13)
  group.add(geometry14)
  group.add(geometry144)
  group.add(geometry15)
  group.add(geometry16)
  group.add(geometry17)
  group.add(geometry18)
  group.add(geometry19)
  group.add(geometry20)
  group.add(geometry21)
  group.add(geometry22)
  group.add(geometry23)
  group.add(geometry24)
  group.add(geometry24_4)
  group.add(geometry24_4_1)
  group.add(geometry25)
  group.add(geometry26)
  group.add(geometry27)
  group.add(geometry28)
  group.add(geometry29)
  group.add(geometry30)
  group.add(geometry31)
  group.add(geometry32)
  group.add(geometry33)
  group.add(geometry34)
  group.add(geometry35)
  group.add(geometry36)
  group.add(geometry37)
  group.add(geometry38)
  group.add(geometry39)
  group.add(geometry40)
  group.add(geometry41)
  group.add(geometry42)
  group.add(geometry43)
  group.add(geometry44)
  group.add(geometry45)
  group.add(geometry46)
  group.add(geometry47)
  group.add(geometry48)
  group.add(geometry49)
  group.add(geometry50)
  group.add(geometry51)
  group.add(geometry52)
  group.add(geometry53)
  group.add(geometry54)
  group.add(geometry56)
  group.add(geometry57)
  group.add(geometry58)
  group.add(geometry59)
  group.add(geometry60)
  group.add(geometry61)
  group.add(geometry62)
  group.add(geometry63)
  group.add(geometry64)
  group.add(geometry65)
  group.add(geometry66)
  group.add(geometry67)
  group.add(geometry68)
  group.add(geometry69)
  group.add(geometry70)
  group.add(geometry71)
  group.add(geometry72)
  group.add(geometry73)


}
let arr: any = []
function geometryDown1() {
  for (let index = 0; index < dian.length; index++) {
    const element = dian[index];
    let _p: any = 'geometry' + index
    _p = new TWEEN.Tween(element[0]).to(element[1], 3000)
      .onUpdate(function (obj) {
        camera.position.set(obj.x, obj.y, obj.z);
        camera.lookAt(obj.tx, obj.ty, obj.tz);
      })
    arr.push(_p)
  }
}

// function draw() {
//   const group = new TWEEN.Group()
//   for (let index = 0; index < arr.length; index++) {
//     console.log(index);

//     // arr[index1].chain(arr[index1 + 1])
//     if (index == arr.length) {
//       arr[index].start()
//     }
//     const group = new TWEEN.Group()
//     group.add(arr[index])

//   }
// }

// function pos() {
//   for (let index = 0; index < dian.length; index++) {
//     const element = dian[index];
//     console.log(element,element[0]);

//    setTimeout(()=>{
//     camera.position.set(element[0].x,element[0].y, element[0].z);
//     camera.lookAt(element[0].tx, element[0].ty,element[0].tz);
//     requestAnimationFrame(animate);

//     renderer.render(scene, camera);  
//    },1000)

//   }

// }

// function createFlyControls() {
//   let clock = new THREE.Clock()
//   let flyControls = new FlyControls(camera, threeContainer.value)
//   flyControls.movementSpeed = 25 //移动速度
//   threeContainer.value = threeContainer.value //配置dom元素
//   flyControls.rollSpeed = Math.PI / 24 //翻滚角速度
//   flyControls.autoForward = false //自动向前关闭
//   flyControls.dragToLook = false //拖动视图变换关闭
// }

// createFlyControls()

const dby = () => {
  if (bjsCanvas.value) {
    const engine = new Engine(bjsCanvas.value, true);
    const scene = new Scene(engine);

    // 创建相机  
    const camera = new FreeCamera('camera1', new Vector3(0, 5, -10), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl(bjsCanvas.value, true);

    // 创建灯光  
    const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    // 创建地面和球体  
    const ground = MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene);
    const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2, segments: 32 }, scene);
    sphere.position.y = 1;

    // 运行渲染循环  
    engine.runRenderLoop(() => {
      scene.render();
    });

    // 窗口大小变化时调整引擎大小  
    window.addEventListener('resize', () => {
      engine.resize();
    });
  }
}
onMounted(() => {
  initThree();
  animate();

});
onBeforeUnmount(() => {

});
</script>
<template>
  <div ref="threeContainer" class="three-container"></div>
</template>
<style scoped>
.three-container {
  width: 100%;
  height: 100%;
  /* 或者你想要的高度 */
  overflow: hidden;
}
</style>